<template>
    <a-locale-provider :locale="locale">
        <div
            :style="{
                position: 'relative',
                height: clientHeight + 'px',
            }"
        >
            <a-layout class="main-container">
                <a-layout-sider
                    class="left-container"
                    :trigger="null"
                    collapsible
                    :collapsed="collapsed"
                    v-if="!isFullScreen"
                    :style="{
                        width: !collapsed ? '200px' : '0px',
                        minWidth: !collapsed ? '200px' : '0px',
                        maxWidth: !collapsed ? '200px' : '0px',
                        flex: !collapsed ? '0 0 200px' : '0 0 0px',
                    }"
                >
                    <!--LOGO区-->
                    <div class="logo" v-if="!collapsed">
                        <div class="item-row">
                            <div class="image">
                                <!-- <a-icon type="shake" style="font-size:24px;color:#fffb8f" /> -->
                                <img :src="require('../assets/images/logo.png')" />
                            </div>
                            <div class="text" v-if="!collapsed">
                                {{ $t("portal.home.title") }}
                            </div>
                        </div>
                    </div>
                    <!--菜单区-->
                    <div style="text-align:left" v-if="!collapsed"><left-menu @handleTurnToFrame="handleTurnToFrame" /></div>
                </a-layout-sider>
                <a-layout class="right-container">
                    <!-- <a-layout-header style="background: #fff; padding: 0;text-align:left"> -->
                    <a-layout-header class="header-container" v-if="!isFullScreen">
                        <a-row :gutter="24">
                            <a-col :span="2">
                                <a-icon @click="collapseMenuClick" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
                            </a-col>
                            <a-col :span="22">
                                <div class="tool-list">
                                    <span class="item">
                                        <a-icon type="home" class="icon" @click="handleTurnToRoute('/main/home')" />
                                    </span>
                                    <span class="item">
                                        <!--设置菜单-->
                                        <a-dropdown>
                                            <a-icon type="setting" class="icon" />
                                            <a-menu slot="overlay" v-if="rightTopMenus.length > 0">
                                                <a-menu-item v-for="(item, i) in rightTopMenus" :key="i" @click="onTurnToMenu(item.path)">
                                                    {{ $t(item.title) }}
                                                </a-menu-item>
                                                <!-- <a-menu-item key="3" @click="handleTurnToFrame('/main/customModule')">
                                                    {{ $t("portal.setting.customModule") }}
                                                </a-menu-item> -->
                                            </a-menu>
                                        </a-dropdown>
                                    </span>
                                    <span class="item">
                                        <a-dropdown>
                                            <div class="image-text-row">
                                                <a-icon type="user" class="icon" />
                                                <span>{{ userinfo.username }}</span>
                                            </div>

                                            <a-menu slot="overlay">
                                                <a-menu-item key="3" disabled>
                                                    {{ $t("portal.home.roleDesc") }}：
                                                    <div style="color:#8c8c8c" v-if="userinfo.roles.length == 0">
                                                        {{ userinfo.roles.isSpuer == "y" ? $t("portal.home.adminRoleName") : "" }}
                                                    </div>
                                                    <div style="color:#8c8c8c" v-else>
                                                        <span v-for="role in userinfo.roles" :key="role.id">
                                                            {{ role.name }}
                                                            <br />
                                                        </span>
                                                    </div>
                                                </a-menu-item>
                                                <a-menu-divider />
                                                <a-menu-item key="1" @click="handleTurnToRoute('/main/personalsetting')">
                                                    {{ $t("portal.home.profile") }}
                                                </a-menu-item>
                                                <a-menu-item key="2">
                                                    <a href="#" @click="showPasswordChanging">{{ $t("portal.home.changePwd") }}</a>
                                                </a-menu-item>
                                                <a-menu-item key="3" @click="signOut">
                                                    <router-link to="/">{{ $t("portal.home.logout") }}</router-link>
                                                </a-menu-item>
                                            </a-menu>
                                        </a-dropdown>
                                    </span>
                                    <!--<span class="item">
                                        <a-dropdown>
                                            <div class="text">{{ langAbbr }}</div>
                                            <a-menu slot="overlay">
                                                <a-menu-item key="1" @click="switchLocale('en-us')">
                                                    English
                                                </a-menu-item>
                                                <a-menu-item key="2" @click="switchLocale('zh-cn')">
                                                    简体中文
                                                </a-menu-item>
                                            </a-menu>
                                        </a-dropdown>
                                    </span>-->
                                    <!--<span style="display:inline-block;padding:0 12px;position:relative">
                                        <a-badge :count="92" :offset="[5, -4]">
                                            <a-icon type="bell" style="font-size: 20px;color:rgba(255,255,255,1)" />
                                        </a-badge>
                                    </span>-->
                                </div>
                            </a-col>
                        </a-row>
                    </a-layout-header>
                    <a-layout-content
                        :style="{
                            margin: '16px 16px',
                        }"
                    >
                        <keep-alive :max="5">
                            <router-view
                                :style="{ display: visibleIframe ? 'none' : 'block' }"
                                :key="$route.fullPath"
                                v-if="$route.meta.keepAlive"
                            ></router-view>
                        </keep-alive>
                        <router-view :style="{ display: visibleIframe ? 'none' : 'block' }" :key="$route.fullPath" v-if="!$route.meta.keepAlive"></router-view>

                        <iframe
                            :src="linkUrl"
                            name="MainFrameContainer"
                            id="MainFrameContainer"
                            ref="mainFrameContainer"
                            :width="clientSize.width"
                            :height="clientSize.height"
                            frameborder="0"
                            scrolling="auto"
                            :style="{ display: visibleIframe ? 'block' : 'none' }"
                        ></iframe>
                    </a-layout-content>
                </a-layout>
            </a-layout>
            <!--<password-change :visible="visibleContainer" @showPassworChange="visibleHandler"></password-change>-->
        </div>
    </a-locale-provider>
</template>
<script>
import LeftMenu from "./menu";
//import PasswordChange from "../views/personalsetting/passwordChange.vue";
import { removeUserInfo, getToken } from "../utils/login";
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import en_US from "ant-design-vue/lib/locale-provider/en_US";
import moment from "moment";
import "moment/locale/zh-cn";
import "moment/locale/en-gb";
import { mapState } from "vuex";
moment.locale(localStorage.getItem("locale") && localStorage.getItem("locale") == "zh-cn" ? "zh-cn" : "en-gb");
const colWidth = 240;
export default {
    inject: ["reload"],
    components: {
        //PasswordChange: PasswordChange,
        "left-menu": LeftMenu,
    },
    data() {
        return {
            locale: localStorage.getItem("locale") && localStorage.getItem("locale") == "zh-cn" ? zh_CN : en_US,
            langAbbr: localStorage.getItem("locale") && localStorage.getItem("locale") == "zh-cn" ? "中文" : "EN",
            visibleContainer: false,
            collapsed: false,
            current: ["mail"],
            openKeys: ["sub1"],
            clientHeight: "",
            linkUrl: "",
            collapseWidth: colWidth,
            clientSize: {
                width: document.body.clientWidth - colWidth,
                height: document.body.clientHeight,
                iframeHeight: 0,
            },
            visibleIframe: false,
            userinfo: this.GLOBAL.getUserInfo(),
            selectedTreeUrl: "",
            node: null,
            parentNode: null,
            showRouterAlive: true,
        };
    },
    computed: {
        ...mapState({
            navTreeList: state => state.Navigation.navMenu,
            rightTopMenus: function(state) {
                return state.Navigation.rightTopMenus.filter(item => {
                    if (item.isAuthorized) return item;
                });
            },
            isFullScreen: state => state.isFullScreen,
        }),

        openTreeKeys: {
            get() {
                return this.$store.state.Navigation.openTreeKeys;
            },
            set(value) {
                this.$store.state.Navigation.openTreeKeys = value;
            },
        },
    },
    methods: {
        collapseMenuClick() {
            this.collapsed = !this.collapsed;
            this.$store.commit("Navigation/MU_COLLAPSED_MENU", this.collapsed);

            if (this.collapsed && this.visibleIframe) {
                this.clientSize.width = this.clientSize.width + 120;
            } else {
                this.clientSize.width = this.clientSize.width - 120;
            }
        },
        initHeight() {
            //获取高度            //获取浏览器可视区域高度
            this.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // console.log($(document).height());//浏览器可视区域对象宽度
            window.onresize = () => {
                //当窗口或框架发生改变时触发            //console.log("onresize进来了");
                this.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            };
            //console.log(this.clientHeight);
        },
        showPasswordChanging() {
            this.visibleContainer = true;
            //console.log("showPasswordChanging:", this.visibleContainer);
        },
        onTurnToMenu(url) {
            this.$store.commit("Navigation/setOpenedMenuItem", url);
            this.handleTurnToFrame(url);
        },
        handleTurnToFrame(url, nodeKey) {
            if ((url && url.toLowerCase().indexOf("http://") == 0) || (url && url.toLowerCase().indexOf("https://") == 0)) {
                let token = getToken();
                let tokenUrl = url + "?token=" + token;
                //url相同不触发跳转的问题修复
                if (this.linkUrl && this.linkUrl == tokenUrl) {
                    window.frames["MainFrameContainer"].postMessage({ action: "reload", url: tokenUrl }, "*");
                }
                this.linkUrl = tokenUrl;
                this.visibleIframe = true;
            } else {
                this.handleTurnToRoute(url);
                this.selectedTreeUrl = url;
                //this.setKeys();
            }

            //this.setKeys(url, nodeKey);
        },
        handleTurnToRoute(url) {
            this.visibleIframe = false;
            this.$router.replace({ path: url });
            this.$router.push({ path: url });
        },
        visibleHandler() {
            this.visibleContainer = false;
        },
        signOut() {
            removeUserInfo();
        },
        switchLocale(lang) {
            //切换Antd语言包
            if (lang == "zh-cn") {
                this.locale = zh_CN;
                this.langAbbr = "中文";
            } else {
                this.locale = en_US;
                this.langAbbr = "EN";
            }
            //切换Vue自身语言包
            this.$i18n.locale = lang;
            localStorage.setItem("locale", lang);
            moment.locale(lang);
            this.reload();
        },
    },
    mounted() {
        //console.log(this.GLOBAL.getUserInfo());
        //this.locale = localStorage.getItem("locale") && localStorage.getItem("locale") == "zh-cn" ? zh_CN : en_US;
        this.initHeight();
        const that = this;
        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth;
                if (that.$store.state.Navigation.collapsed) {
                    that.collapseWidth = colWidth - 120;
                }
                that.clientSize.width = document.body.clientWidth - this.collapseWidth;

                that.clientSize.height = document.body.clientHeight;
                if (that.clientSize.iframeHeight > that.clientSize.height) {
                    that.clientSize.height = that.clientSize.iframeHeight;
                }
            })();
        };

        let iframe = document.getElementById("MainFrameContainer");
        //接收iframe命令
        window.addEventListener(
            "message",
            function(e) {
                //console.log("收到命令：", e.data);
                if (typeof e.data == "object") {
                    //let iframeCmd=JSON.parse(e.data);
                    if (e.data.clientHeight) {
                        that.clientSize.height = e.data.clientHeight;
                        that.clientSize.iframeHeight = iframe.height;
                    }

                    if (e.data.action) {
                        if (e.data.action == "offline") {
                            //console.log("跳转");
                            that.$router.push({ name: "login" });
                        }
                    }
                }
            },
            false,
        );

        if (iframe.attachEvent) {
            iframe.attachEvent("onload", function() {
                if (that.$store.state.Navigation.collapsed) {
                    that.collapseWidth = colWidth - 120;
                }
                that.clientSize.width = document.body.clientWidth - that.collapseWidth;
                //iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;

                //that.clientSize.iframeHeight = iframe.height;
                //console.log("计算iframe高度" + that.clientSize.iframeHeight);
            });
            return false;
        } else {
            iframe.onload = function() {
                //console.log("document.body.clientWidth");

                if (that.$store.state.Navigation.collapsed) {
                    that.collapseWidth = colWidth - 120;
                }
                that.clientSize.width = document.body.clientWidth - that.collapseWidth;
                //iframe.height = iframe.contentDocument.body.scrollHeight;
                //that.clientSize.width
                //that.clientSize.iframeHeight = iframe.height;
                //console.log("计算iframe高度" + that.clientSize.iframeHeight);
            };
            return false;
        }
    },
    watch: {
        openKeys(val) {
            console.log("openKeys", val);
        },
    },
};
</script>
